<template>
    <div class="quick-wrap" v-if="store.quick.length">
        <div class="quick-title">
            <div class="title-text">常用</div>
        </div>
        <div class="quick-body">
            <div
                    class="quick-item no-select"
                    v-for="(item, index) in store.quick"
                    :key="index"
                    @click="openPage(item)"
            >
                <img class="item-img" :src="item.icon" alt="">
                <div class="item-text text-elip">{{item.title}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {openPage} from '/src/util/index';
    import website from "/src/config/website";

    export default {
        name: "Quick",
        // 组件
        components: {},
        // 数据
        data() {
            return {
                // vuex 状态
                store: useStore().state,
            }
        },
        // DOM未渲染前调用
        created() {
            this.getQuick();
        },
        // 方法
        methods: {
            // 数据列表
            getQuick(refresh = false) {
                let that = this;
                that.$store.dispatch('getQuick', {limit: website.quickLimit, refresh: refresh}).then(list => {
                    console.log('getQuick', list);
                });
            },
            // 跳转
            openPage(item) {
                let that = this;
                that.$store.dispatch('clickBookmark', {
                    uwid: item.id,
                    wid: item.wid,
                }).then(res => {
                    openPage(item.url, 'quick');
                })
            },
        },
        // 监听
        watch: {
            // key 变化
            '$store.state.key'() {
                this.getQuick(true);
            },
        }
    }
</script>

<style lang="less" scoped>
    @radius: 10px;

    .quick-wrap {
        margin-top: 20px;

        .quick-title {
            margin-bottom: 10px;
            font-weight: bold;
        }

        .quick-body {
            height: 80px;
            overflow-y: hidden;
            overflow-x: auto;
            white-space: nowrap;
            /*text-align: center;*/

            &::-webkit-scrollbar {
                height: 5px;
                cursor: pointer;
            }

            .quick-item {
                display: inline-block;
                text-align: center;
                width: 70px;
                height: 70px;
                padding: 10px 4px;
                margin-right: 10px;
                border-radius: @radius;
                background-color: white;
                cursor: pointer;

                &:hover {
                    background-color: #f6f6f6;
                }

                &:last-child {
                    margin-right: 0;
                }

                .item-img {
                    display: inline-block;
                    width: 25px;
                    height: 25px;
                    border-radius: 25px;
                    position: relative;

                    &:after {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                        top: 0;
                        left: 0;
                        background: url('/src/assets/imgs/network.png') white;
                        background-size: 100%;
                    }
                }

                .item-text {
                    height: 16px;
                    line-height: 16px;
                    font-size: 12px;
                    margin-top: 8px;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .quick-wrap {
            .quick-body {
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
</style>
